<template>
  <div class="category">
    <div class="category-container">
      <div class="category-left">
        <ul>
          <li @click="categorItemChange(index)" class="item" :class="index === current ? 'active' : ''"
            v-for="(item, index) in categoryList" :key="item.id">
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="category-right">
        <img class="banner-img" src="" alt="">
        <h2 class="title">家居分类</h2>
        <div class="sub-category-cotainer">
          <ul class="sub-list">
            <li @click="goGoodsList(item.id,item.name)" class="item" v-for="item in  currentOne.subList" :key="item.id">
              <img class="img" :src="item.wap_banner_url" alt="">
              <div class="name">{{ item.name }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  indexaction as indexactionApi,
  currentaction as currentactionApi
} from '@/api/category'
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const categoryList = ref([])
const currentOne = ref({})
const current = ref(0)
onMounted(async () => {
  const res = await indexactionApi()
  categoryList.value = res.categoryList
  getSubCategory(categoryList.value[0].id)
})

const getSubCategory = async (id) => {
  const res = await currentactionApi({ id })
  currentOne.value = res.data.currentOne
}


const categorItemChange = (idx) => {
  current.value = idx
  getSubCategory(categoryList.value[idx].id)
}

const goGoodsList = (id,name)=>{
  router.push({name:'Goodslist',query:{id,name}})
}












</script>
<style lang="scss" scoped>
.category {
  height: 100vh;

  &-container {
    display: flex;
    height: 100%;

    .category-left {
      width: 164px;
      height: 100%;
      padding-top: 60px;
      background-color: #fff;

      .item {
        margin-bottom: 64px;
        text-align: center;
        font-family: PingFangSC-Regular;
        font-size: 30px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 400;

        &.active {
          font-family: PingFangSC-Semibold;
          color: #CEA62A;
          font-weight: 600;
        }
      }
    }

    .category-right {
      flex: 1;

      .banner-img {}

      .title {
        position: relative;
        text-align: center;
        font-family: PingFangSC-Medium;
        font-size: 30px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        &::after{
          position: absolute;
          top: 26px;
          left: 50%;
          transform: translateX(-50%);
          z-index: -1;
          content: '';
          width: 120px;
          height: 10px;
          background-color: #b7a673;
        }
      }

      .sub-category-cotainer {
        .sub-list {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 38.5px 40.01px;
          padding: 0 40px;

          .item {
            text-align: center;

            .img {
              width: 137px;
              height: 137px;
            }

            .name {

              font-family: PingFangSC-Medium;
              font-size: 24px;
              color: #333333;
              letter-spacing: 0;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}</style>